<template>
    <div>
      <el-table :data="books" style="width: 100%">
        <el-table-column prop="id" label="ID" width="50"></el-table-column>
        <el-table-column prop="title" label="书名"></el-table-column>
        <el-table-column prop="author" label="作者"></el-table-column>
        <el-table-column prop="copies" label="库存"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="deleteBook(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <el-button type="primary" @click="showAddBookDialog = true">添加图书</el-button>
  
      <el-dialog title="添加图书" :visible.sync="showAddBookDialog">
        <el-form :model="newBook">
          <el-form-item label="书名">
            <el-input v-model="newBook.title"></el-input>
          </el-form-item>
          <el-form-item label="作者">
            <el-input v-model="newBook.author"></el-input>
          </el-form-item>
          <el-form-item label="库存">
            <el-input type="number" v-model="newBook.copies"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="showAddBookDialog = false">取消</el-button>
          <el-button type="primary" @click="addBook">添加</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        books: [
          { id: 1, title: "Python编程", author: "John Doe", copies: 4 },
          { id: 2, title: "历史的秘密", author: "Jane Smith", copies: 3 },
          { id: 3, title: "宇宙探索", author: "Emily Brown", copies: 2 },
          { id: 4, title: "健康生活", author: "Mike Johnson", copies: 5 },
          { id: 5, title: "数学之美", author: "Sarah Lee", copies: 4 },
          { id: 6, title: "艺术欣赏", author: "David White", copies: 3 },
          { id: 7, title: "编程入门", author: "Alice Green", copies: 2 },
          { id: 8, title: "科幻世界", author: "Frank Black", copies: 5 },
          { id: 9, title: "自然奇观", author: "Grace Blue", copies: 4 },
          { id: 10, title: "音乐之声", author: "Tom Red", copies: 3 }
        ],
        showAddBookDialog: false,
        newBook: {
          title: '',
          author: '',
          copies: 0
        }
      }
    },
    methods: {
      addBook() {
        if (this.newBook.title && this.newBook.author && this.newBook.copies > 0) {
          this.newBook.id = this.books.length + 1;
          this.books.push({ ...this.newBook });
          this.showAddBookDialog = false;
          this.newBook = { title: '', author: '', copies: 0 };
        } else {
          this.$message.error('请填写完整的图书信息');
        }
      },
      deleteBook(index) {
        this.books.splice(index, 1);
      }
    }
  }
  </script>
  
  <style scoped>
  .el-button {
    margin: 20px 0;
  }
  </style>
  